<script lang="tsx">
import { defineComponent, VNode } from 'vue';
import HelloWorld from "../components/HelloWorld.vue";
import Count from "../components/Count";
import BaseLayout from "../components/BaseLayout";
import PropTest, { PropTestProps } from "../components/PropTest.vue";
import ButtonCounterContainer from "../components/ButtonCounterContainer";
import logo from '../assets/logo.png';

export default defineComponent({
    data() {
        return {
            propTestProps: {
                msg: 'my prop msg value'
            } as PropTestProps,
            propTestVisible: false
        };
    },
    methods: {
        propTestUpdateHandler(val: boolean) {
            this.propTestVisible = val;
        }
    },
    render() {
        return (
            <div class="home">
                <img alt="Vue logo" src={logo} />
                <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
                <PropTest myProp={this.propTestProps} visible={this.propTestVisible} onUpdate:visible={this.propTestUpdateHandler} />
                <ButtonCounterContainer />
                <Count propsNum={20} />
                <BaseLayout>
                    {{
                        header: ()=>'这是头部',
                        default: (props: { scopUser: string, scopIndex: number }) => (<span>这是内容，用户为{props.scopUser}，索引为{props.scopIndex}</span>),
                        footer: ()=>'这是尾部'
                    }}
                </BaseLayout>
            </div>
        );
    }
})
</script>
